<template>
	<view class="withdraw Column">
		<view class="withdraw_header Column">
			<view class="childer Row">
				<view class="text">银行卡号</view>
				<input class="input" type="number" placeholder="请输入银行卡号..." data-signedInfo="bankcard" @input="input" />
			</view>
			<view class="childer Row">
				<view class="text">姓名</view>
				<input class="input" type="text" placeholder="请输入本人姓名..." data-signedInfo="realname" @input="input" />
			</view>
			<view class="childer Row">
				<view class="text">身份证号</view>
				<input class="input" type="text" placeholder="请输入身份证号..." data-signedInfo="idcard" @input="input" />
			</view>
			<view class="childer Row">
				<view class="text">银行预留手机号</view>
				<input class="input" type="number" placeholder="请输入银行预留手机号..." data-signedInfo="mobile"
					@input="input" />
			</view>
		</view>

		<view class="withdraw_submit" @click="confirm">确认提现</view>

		<!-- withdraw_detail -->
		<view class=" withdraw_submits Row" @click="recordOfContract">已添加的银行卡</view>

		<view class="Row UserPrivacyAgreement">
			<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, index) in checkboxList1" :key="index"
					:label="item.name" :name="item.name">
				</u-checkbox>
			</u-checkbox-group>
			<view class="text" @click="pathJump">遵守并同意<span style="color: #0384FC;">《灵活就业合作伙伴协议》</span></view>
		</view>

		<view class="withdraw_tips">
			<p class="p">温馨提示：</p>
			<p class="p">1、单次收益最低提现100起，最高50000元。</p>
			<p class="p">2、可提现时间：工作日09:00-17:00。</p>
			<p class="p">3、收益提现9%税费。</p>
			<p class="p">4、提现年龄：18~60周岁。</p>
		</view>
	</view>
</template>

<script>
	import {
		postMenu,
		getMenu
	} from '@/utils/api.js';
	export default {
		data() {
			return {
				// 隐私协议
				checkboxValue1: [],
				checkboxList1: [{
					name: '',
					disabled: false
				}],
				ischeck: "",

				signedInfo: {
					bankcard: "",
					realname: "",
					idcard: "",
					mobile: ""
				}
			};
		},
		methods: {

			pathJump() {
				uni.navigateTo({
					url:"/pages/mine/withdraw/Signed/PrivacyAgreement/PrivacyAgreement"
				})
			},

			// 隐私协议
			checkboxChange(e) {
				this.ischeck = e.length;
				console.log(this.ischeck);
			},

			recordOfContract() {
				uni.navigateTo({
					url: "./recordOfContract/recordOfContract"
				})
			},

			input(e) {
				let name = e.currentTarget.dataset.signedinfo;
				let Val = e.detail.value.trim();
				this.signedInfo[name] = Val;
			},
			confirm() {
				let that = this,
					signedInfo = that.signedInfo;
				if (signedInfo.bankcard == "") {
					uni.$u.toast("未填写银行卡号")
					return false;
				}
				if (signedInfo.realname == "") {
					uni.$u.toast("未填写姓名")
					return false;
				}
				if (signedInfo.idcard == "") {
					uni.$u.toast("未填写身份证号")
					return false;
				}
				if (signedInfo.mobile == "") {
					uni.$u.toast("未填写手机号")
					return false;
				}
				if (this.ischeck != "1") {
					return uni.$u.toast("请选择遵守并同意《灵活就业合作伙伴协议》");
				}
				uni.$u.http.post('/stb.withdraw/signUp', {
					bankcard: signedInfo.bankcard,
					realname: signedInfo.realname,
					idcard: signedInfo.idcard,
					mobile: signedInfo.mobile
				}).then(res => {
					if (res.code == 0) {
						uni.$u.toast(res.msg);
						return false;
					}
					uni.$u.toast("已提交，请耐心等待审核~");
					setTimeout(function() {
						uni.navigateTo({
							url: './recordOfContract/recordOfContract'
						})
					}, 1000)
				}).catch(err => console.log(err.msg))
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.text {
		// color: #7E7E9A;
	}

	.input {
		width: 300rpx;
		text-align: center;
	}

	.paratexts {
		font-size: 30rpx;
	}

	.withdraw {
		width: 100%;

		.UserPrivacyAgreement {
			justify-content: center;
			margin-top: 12px;

			.text {
				padding-bottom: 8px;
			}
		}

		&_header {
			flex: 1;
			background-color: #fff;
			padding: 0 30rpx;
			// margin-top: 20rpx;

			.childer {
				justify-content: space-between;
				padding: 20rpx 0;

				.btn {
					color: #0384FC;
					font-size: 28rpx;
					border-radius: 8rpx;
					border: 2rpx solid #0384FC;
					padding: 8rpx 12rpx;
					margin-left: 20rpx;
				}
			}

			// .childer:nth-child(2) {
			// 	border-bottom: 2rpx solid #e8e8e8;
			// }
		}

		&_submit {
			color: #fff;
			// background-color: #0056FF;
			background: linear-gradient(to right, #0056FF, #01b2fe);
			// box-shadow: 4px 4px 10px #01b2fe;
		}

		&_submits {
			color: #0384FC;
			border: 2rpx solid #0384FC;
		}

		&_submit,
		&_submits {
			width: 92%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 17px;
			// background: linear-gradient(to bottom, #0384FC, #0E3B99);
			border-radius: 8px;
			padding: 24rpx 0;
			margin: 40rpx auto 0;
		}

		&_detail {
			width: 94%;
			color: #7E7E9A;
			font-size: 30rpx;
			justify-content: flex-end;
		}

		&_tips {
			padding: 20rpx;

			.p {
				padding: 4rpx;
			}
		}
	}
</style>